<template>
  <!-- 移除router-link包裹，改用事件触发 -->
  <div 
    class="assistant-ball" 
    v-draggable="{ left: 0, top: 550 }"
    @v-drag-click="handleClick"
  >
    <div class="ball-body">
      🤖
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const handleClick = () => {
  router.push('/chatBot');
};
</script>

<style lang="css" scoped>
  .assistant-ball {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    cursor: move;
    transition: transform 0.1s ease;
    z-index: 9999;
  }
  
  .ball-body {
    width: 100%;
    height: 100%;
    background: #409eff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: white;
    transition: all 0.2s;
  }
  
  .ball-body:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  }
  </style>